<template>
  <div>
    <div class="map" id="container"></div>
    <el-divider content-position="left">电影院列表</el-divider>

    <!-- 表格 -->
    <div v-if="cinemas && cinemas.length!=0">
      <el-table :data="cinemas">
        <el-table-column prop="cinema_name" label="影院名称"></el-table-column>
        <el-table-column prop="address" label="影院地址"></el-table-column>
        <el-table-column prop="" label="影院位置" width="240px">
          <template slot-scope="scope">
            {{ scope.row.province }}&nbsp;
            {{ scope.row.city }}&nbsp;
            {{ scope.row.district }}
          </template>
        </el-table-column>
        <!-- 按钮 -->
        <el-table-column prop="" label="操作" width="220px">
          <template slot-scope="scope">
            <el-button size="samll" type="success" icon="el-icon-position" circle @click="map.setZoomAndCenter(15,[scope.row.longitude, scope.row.latitude],false, 300)"></el-button>
            <el-button size="samll" type="success" icon="el-icon-office-building" circle @click="$router.push(`/home/cinema-room-list/${scope.row.id}`)"></el-button>
            <el-button size="samll" type="warning" icon="el-icon-edit" circle></el-button>
            <el-button size="samll" type="danger" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-empty v-else description="暂无数据"></el-empty>
  </div>
</template>

<script>
import httpApi from '@/http';
import AMapLoader from '@amap/amap-jsapi-loader';

  export default {
    data() {
      return {
        cinemas: []  //存储所有影院
      }
    },
    methods: {
      // 初始化地图
      initMap(){
        AMapLoader.load({
          key:"ddcfbbbb2ba4c9eba7a4b5c947e7c723",  // 申请好的Web端开发者Key，首次调用 load 时必填
          version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          plugins:['AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
          this.AMap = AMap
          // console.log(this.AMap)
          this.map = new AMap.Map("container",{  //设置地图容器id
            viewMode:"3D",    //是否为3D地图模式
            zoom:11,           //初始化地图级别
            center:[116.502725, 39.916636], //初始化地图中心点位置
          });
        }).catch(e=>{
          console.log(e);
        })
        // 加载列表数据
        this.listCinemas()
      },

      // 加载影院列表
      listCinemas(){
        httpApi.cinemaApi.queryAll().then(res=>{
          // console.log('查询所有电影院', res)
          this.cinemas = res.data.data
          // 为每一个电影院构造一个Marker对象, 添加到地图中
          this.cinemas.forEach(item=>{
            let lngLat = [item.longitude, item.latitude]
            // 构造Marker对象, 添加到地图中
            let marker = new this.AMap.Marker({
              position: lngLat, // 标记的位置
              title: item.cinema_name // 点击标记的提示文本
            })
            // 将创建的点标记添加到已有的地图实例：
            this.map.add(marker)
            // console.log(this.map)
          })
        })
      }
    },
    mounted(){
      //DOM初始化完成进行地图初始化
      this.initMap();
    }
  }
</script>

<style lang="scss" scoped>
.map {
  height: 260px;
  border: 1px solid #666;
}
</style>